import Taro, {Component} from '@tarojs/taro'
import {View} from '@tarojs/components'
import Welcome from "./welcome";

export default class Xhl6 extends Component {
  config = {
    navigationBarTitleText: '函数式组件'
  }

  constructor (props) {
    super(props)
    this.state = { name: '徐宏亮', header: 'header' }
  }

  renderHeader () {
    const { header } = this.state
    return <View>{header}</View>
  }

  renderFooter (footer) {
    return <View>{footer}</View>
  }

  renderTitle = () => {
    // renderTitle 每次都能获取到当前作用域 `name` 的值
    const { name } = this.state
    return <View>Welcome, {name}</View>
  }

  render() {
    return (
      <View>
        <View>1. 普通函数式组件</View>
        <View>(1). 函数的命名需要遵循帕斯卡式命名法；</View>
        <View>(2). 一个文件中只能定义一个普通函数式组件或一个 Class 组件</View>
        <Welcome name='徐宏亮' />

        <View>2. 类函数式组件</View>
        <View>由于一个文件不能定义两个组件，但有时候我们需要组件内部的抽象组件</View>
        <View>(1). 由函数的命名必须以 render 开头，render 后的第一个字母需要大写</View>
        <View>(2). 函数的参数不得传入 JSX 元素或 JSX 元素引用</View>
        <View>(3). 函数不能递归地调用自身(可创建两个相同的解决)</View>
        <View>
          {this.renderHeader()}
          <View>我是身体</View>
          {this.renderFooter('footer')}
        </View>

        <View>3. 闭包函数式组件</View>
        <View>我们需要一个另外的抽象组件多次调用</View>
        <View>希望这个抽象组件能访问到我们当前作用域的值</View>
        <View>闭包函数式组件遵循所有类函数式的限制，包括命名，传参，调用，并且它只能在一个普通函数式组件或类函数式组件以及 Taro.Component 的 render 函数中定义及调用。</View>
        <View>一般情况下只建议在普通函数式组件中使用闭包函数式组件，而在 Taro.Component 中可以显式地定义一个类函数式组件和它的参数和签名，这样函数的作用域更为清晰也更易维护。</View>
        <View>
          {/* 重要人士我们要欢迎他三次 */ }
          {this.renderTitle()}
          {this.renderTitle()}
          {this.renderTitle()}
        </View>
      </View>
    )
  }
}
